<template>
  <div>
    <p>watch 监听器</p>
    <p>{{ count }} --<button @click="count++">count++</button></p>
    <p>
      彭志豪的薪水: {{ salary }} --<button @click="salary += 1000">
        涨薪水
      </button>
    </p>
    <p>
      女朋友薪水:{{ girlFriend.name }}=-{{ girlFriend.salary }} --<button
        @click="girlFriend.salary += 1000"
      >
        我也涨
      </button>
    </p>
  </div>
</template>

<script>
import { watch, ref, reactive } from "vue";
export default {
  name: "",
  props: [""],
  data() {
    return {
      count: 0,
    };
  },
  watch: {
    count(newvalue, oldvalue) {
      console.log(newvalue, oldvalue);
    },
  },

  setup() {
    let salary = ref(10000);
    let girlFriend = reactive({
      name: "小周",
      salary: 20000,
    });

    //  watch 监听
    // watch(要监听的数据,(newvalue,oldvalue)=>{},{immediate:true})
    // watch(
    //   salary,
    //   (newvalue, oldvalue) => {
    //     console.log(newvalue, oldvalue);
    //   },
    //   { immediate: true }
    // );

    // watch 默认深度监听
    // watch(
    //   girlFriend,
    //   (newvalue) => {
    //     console.log(newvalue);
    //   },
    //   { immediate: true }
    // );

    //综合起来的写法
    watch(
      [salary, girlFriend],
      (newvalue, oldvalue) => {
        console.log(newvalue, oldvalue);
      },
      { immediate: true }
    );

    return {
      salary,
      girlFriend,
    };
  },
};
</script>
<style scoped>
</style>